<template>
    <view id="reviewDetails" v-show="isLoading">
       <view class="detail" >
            <view class="header">
                <view class="title">{{title}}</view>
                <view>
                   <view class="status"><uni-tag :text="scale" type="warning" size="small" :inverted="true" :circle="true"></uni-tag></view>
                   <view class="extra">{{state}}</view>
                </view>
            </view>
            <view class="content">
                <view class="content-item"><text>提交时间</text><text>{{time}}</text></view>
                <view class="content-item"><text>上报机构</text><text>{{orgname}}</text></view>
                <view class="content-item"><text>联系人</text><text>{{linkman}}</text></view>
                <view class="content-item"><text>联系方式</text><text>{{contact}}</text></view>
            </view>
       </view>
       <view class="procedure" @click="goEventNotice"><uni-list><uni-list-item title="查看规程" /></uni-list></view>
       <view class="group">
            <uni-card class="card" title="赛事小组" :is-full="true">
                <view class="list">
                	<view class="list-item" v-for="(item,index) in group" :key="index" @click="dealFun(item)">
                        <view class="list-item__container">
                            <view class="group-name">{{item.groupname}} ({{item.num}}人)</view>
                            <uni-tag class="tag" :text="item.state" :type="item.type" size="small" :inverted="true" :circle="true"></uni-tag>
                            <uni-icons class="icon" color="" size="20" type="forward"></uni-icons>
                        </view>
                    </view>
                </view>
            </uni-card>
       </view>
    </view>
</template>
<script>
    import uniList from "@/components/uni-list/uni-list.vue"
    import uniListItem from "@/components/uni-list-item/uni-list-item.vue"
    import uniIcons from "@/components/uni-icons/uni-icons.vue"
    import uniTag from "@/components/uni-tag/uni-tag.vue"
    import uniCard from '@/components/uni-card/uni-card.vue'
    import { getEventDetail, getCertList } from "@/common/api.js"
    export default {
        name: "reviewDetails",
        data() {
            return {
                eventid:'',
                contact:'',
                linkman:'',
                orgname:'',
                time:'',
                scale:'',
                title:'',
                state:'',
                check_state:'',
                eventnotice:'',
                group:[],
                isLoading:false,
            };
        },
        components: {
            uniList,uniListItem,uniIcons,uniTag,uniCard
        },
        methods: {
            dealFun(item){
                uni.navigateTo({
                    url: `/pages/performanceReview/reviewTeam?groupname=${encodeURIComponent(item.groupname)}&groupid=${item.groupid}&status=${item.status}&id=${this.eventid}`
                })
            },
            getData(){
                let p = getEventDetail({id:this.eventid}).then((res)=>{
                    const data = res.data;
                    if(data.errcode==0){
                        if(data.data.eventinfo){
                            this.time = data.data.eventinfo.up_time?data.data.eventinfo.up_time.slice(0,10):''
                        }
                        const configEvent = (data.data.eventconfig && data.data.eventconfig.jsondataevent) ? JSON.parse(data.data.eventconfig.jsondataevent) : "";

                        if(data.data.orginfo && data.data.orginfo.length){
                            this.linkman = data.data.orginfo[0].link_name
                            this.contact = data.data.orginfo[0].link_phone
                            this.orgname = data.data.orginfo[0].org_name
                        }
                        if(configEvent){
                            try{
                                this.eventnotice = decodeURIComponent(configEvent.eventnotice);
                            }catch(err){
                                this.eventnotice = configEvent.eventnotice;
                            }
                        }else{
                            this.eventnotice=''
                        }
                        console.log(this.eventnotice)  
                        uni.setStorageSync('_eventNotice_',this.eventnotice=='undefined'?'':this.eventnotice)
                    }else if(data.errcode==1000 || data.errcode==1001){
                        uni.removeStorageSync('token');
                        uni.reLaunch({
                        	url:'/pages/home/welcome'
                        })
                    }else{
                        uni.showToast({
                        	icon: 'none',
                        	title:data.msg
                        });
                    }
                })
                return p;
            },
            getCert(){
                let p = getCertList({
                    page:'1',
                    pageSize:'1',
                    check_state:'',
                    event_group_id:'',
                    id:this.eventid,
                }).then((res)=>{
                    const data = res.data;
                    if(data.errcode==0){
                        this.group=[];
                        data.group.length && data.group.forEach((e)=>{
                            this.group.push({
                                groupid:e.event_group_id,
                                groupname:e.groupName,
                                state:['待确认','待申领','待审核'][e.check_state],
                                type:['warning','primary','error'][e.check_state],
                                status:e.check_state,
                                num:e.num >> 0
                            })
                        })
                    }else if(data.errcode==1000 || data.errcode==1001){
                        uni.removeStorageSync('token');
                        uni.reLaunch({
                        	url:'/pages/home/welcome'
                        })
                    }else{
                        uni.showToast({
                        	icon: 'none',
                        	title:data.msg
                        });
                    }
                })
                return p;
            },
            goEventNotice(){
                uni.navigateTo({
                    url: '/pages/performanceReview/reviewRich'
                })
            }
        },
        onLoad(options) {
            uni.showLoading({
                title: '加载中'
            });
            this.eventid = options.id;
            this.scale = decodeURIComponent(options.scale);
            this.title = decodeURIComponent(options.title);
            this.state = decodeURIComponent(options.state);
            if(this.state=='待确认'){
                this.check_state=0
            }else if(this.state=='待申领'){
                this.check_state=1
            }else if(this.state=='待审核'){
                this.check_state=2
            }
            // this.getData();
            // this.getCert();
        },
        onShow() {

            let init = async ()=>{
                await this.getData();
                await this.getCert();
                uni.hideLoading()
                this.isLoading=true;
            }
            init()
            // setTimeout(()=>{
            //     uni.hideLoading()
            //     this.isLoading=true;
            // },500)
        }
    };
</script>
<style lang="scss">
    #reviewDetails {
        position: relative;
        height: 100%;
        .detail{
            display: flex;
            flex: 1;
            box-shadow: 0 0 0 transparent;
            margin-top: 24rpx;
            background-color: #fff;
            position: relative;
            flex-direction: column;
            border-color: #e5e5e5;
            border-style: solid;
            border-width: 2rpx;
            border-radius: 6rpx;
            overflow: hidden;
            .header{
                display: flex;
                position: relative;
                flex-direction: row;
                padding: 24rpx;
                // align-items: center;
                border-bottom-color: #e5e5e5;
                border-bottom-style: solid;
                border-bottom-width: 1px;
                justify-content: space-between;
                .title{
                    font-size: 32rpx;
                    // flex: 1;
                    width: 510rpx;
                    font-weight: bold;
                    // white-space: nowrap;
                    // overflow: hidden;
                    // text-overflow: ellipsis;
                }
                .status{
                    padding-top: 8rpx;
                }
                .extra{
                    // flex: 1;
                    margin-top: 6rpx;
                    text-align: center;
                    font-size: 28rpx;
                    // text-align: right;
                    color: #FFA158;
                }
            }
            .content{
                padding: 24rpx;
                .content-item{
                    display: flex;
                    justify-content: space-between;
                }
            }
        }
        .procedure{
            margin-top: 20rpx;
        }
        .group{
            margin-top: 30rpx;
            .card{
                margin: 0;
                margin-top: 30rpx;
            }
            .list{
                display: flex;
                background-color: #fff;
                position: relative;
                flex-direction: column /* border-bottom-color: $uni-border-color; */ /* border-bottom-style: solid; */ /* border-bottom-width: 1px; */;
                .list-item{
                    font-size: 32rpx;
                    position: relative;
                    flex-direction: column;
                    justify-content: space-between;
                    // padding-left: 15px;
                    &:last-child .list-item__container{
                        border-bottom: none;
                    }
                    .list-item__container{
                        position: relative;
                        display: -webkit-box;
                        display: -webkit-flex;
                        display: flex;
                        flex-direction: row;
                        padding: 16rpx 0;
                        padding-left: 0;
                        flex: 1;
                        position: relative;
                        justify-content: space-between;
                        align-items: center;

                        border-bottom: 1px solid #efefef;
                        .group-name{
                            overflow: hidden;
                            white-space: nowrap;
                            max-width: 500rpx;
                        }
                        .tag{
                            margin-left: 20rpx;
                        }
                        .icon{
                            margin-right: 8rpx;
                            margin-left: auto;
                            color:rgb(187, 187, 187);;
                        }
                    }
                }
            }
        }
    }
</style>
